html{
  /*基础字体大小 内外边距 字体颜色 对齐方式*/
  .fs-12{
    font-size: 12px;
  }
  .fs-14{
    font-size: 14px;
  }
  .fs-16{
    font-size: 16px;
  }
  .fs-18{
    font-size: 18px;
  }
  .fs-20{
    font-size: 20px;
  }
  .co-333{
    color: #333333;
  }
  .co-666{
    color: #666666;
  }
  .co-999{
    color: #999999;
  }
  .text-left{
    text-align: left;
  }
  .text-center{
    text-align: center;
  }
  .text-right{
    text-align: right;
  }
  .mt-10{
    margin-top: 10px;
  }
  .mt-15{
    margin-top: 15px;
  }
  .mt-20{
    margin-top: 20px;
  }
  .mt-30{
    margin-top: 30px;
  }
  .mr-10{
    margin-right: 10px;
  }
  .mr-15{
    margin-right: 15px;
  }
  .mr-20{
    margin-right: 20px;
  }
  .mr-30{
    margin-right: 30px;
  }

  .mb-10{
    margin-bottom: 10px;
  }
  .mb-15{
    margin-bottom: 15px;
  }
  .mb-20{
    margin-bottom: 20px;
  }
  .mb-30{
    margin-bottom: 30px;
  }
  .ml-10{
    margin-left: 10px;
  }
  .ml-15{
    margin-left: 15px;
  }
  .ml-20{
    margin-left: 20px;
  }
  .ml-30{
    margin-left: 30px;
  }
  .pt-10{
    padding-top: 10px;
  }
  .pt-15{
    padding-top: 15px;
  }
  .pt-20{
    padding-top: 20px;
  }
  .pt-30{
    padding-top: 30px;
  }
  .pr-10{
    padding-right: 10px;
  }
  .pr-15{
    padding-right: 15px;
  }
  .pr-20{
    padding-right: 20px;
  }
  .pr-30{
    padding-right: 30px;
  }
  .pb-10{
    padding-bottom: 10px;
  }
  .pb-15{
    padding-bottom: 15px;
  }
  .pb-20{
    padding-bottom: 20px;
  }
  .pb-30{
    padding-bottom: 30px;
  }
  .pl-10{
    padding-left: 10px;
  }
  .pl-15{
    padding-left: 15px;
  }
  .pl-20{
    padding-left: 20px;
  }
  .pl-30{
    padding-left: 30px;
  }
  /* 超出隐藏 一行文本与两行文本*/
  .elli-1{
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
  }
  .elli-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp:2; //显示的行
  }
  /*浮动*/
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  /*弹性盒子布局*/
  .flex{
    display: flex;
  }
  .flex-center{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  img {
    object-fit: cover;
  }
}
